<template>
	<view class="x-wrapper">
		<view class="x-main-content">
			<view class="account-box">
				<view class="content-box">
					<u-navbar title="项目详情" :bgColor="bgColor" :fixed="true" leftIcon="arrow-left" leftIconColor="#000"
						leftIconSize="42rpx" autoBack placeholder>
					</u-navbar>
				</view>
				<img class="img1" src="https://peiyiwang.obs.cn-east-3.myhuaweicloud.com/file%2F3726651214097988.png"
					alt="" />
			</view>

			<view class="u_text" @click="goDoc">
				<img :src="contents.image" alt="" />
				<view class="ellipses-three">
					<view class="u_text1">{{contents.name}}</view>
					<view class="u_text2">服务时间为：8：00-18：00</view>
					<view class="u_text3">￥{{contents.price}} <span class="u_text2">/次</span></view>
				</view>
			</view>

			<view class="bottom">
				<u-tabs :list="tabs" keyName="label" lineColor="#386FFF" lineHeight="6rpx"
					:inactiveStyle="searchInactiveStyle" :activeStyle="searchActiveStyle"
					:itemStyle="searchTabItemStyle" :current="current" :scrollable="false" @click="tabsClick">
				</u-tabs>
				<view class="f-item" :class="{ 'active': showFlag }">
					<!-- 配合医院规定流程，取号排队就诊检查等 -->
					<div v-if="current === 0" class="list">
						特此声明：根据医院的防疫政策，进入医院，本项服务仅提供就医辅助支持，遵守医院的规章制度，依次预约次序，依次就诊，所有项目禁止插队
					</div>
					<div v-if="current === 1" class="list">
						预约成功后，客户个人原因取消订单，将收取40%的服务费。服务当天不可取消订单，如取消，费用不退。请您仔细填写订单信息，避免填写错误出现不必要的差错，如出现任何问题，本平台不承担责任。
					</div>
					<div v-if="current === 2" class="list">
						<div>服务前：用户下单，陪诊师接单，沟通需求</div>
						<div>服务中：陪诊师根据用户的订单做出相应的服务</div>
						<div>服务后：用户可以对服务的人员做出评价，我公司会积极采纳，感谢您的信任，我们将为您提供优质的服务</div>
					</div>
				</view>
			</view>
		</view>

		<view class="bottom-box">
			<view class="bottom-a">实付款：
				<view class="bottom-b">
					￥{{contents.price}}
				</view>
			</view>
			<view class="bottom-c" @click="goPlay(contents.id)">
				立即预约
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		methods
	} from '../../uni_modules/uview-ui/libs/mixin/mixin'
	export default {
		data() {
			return {
				params: {
					cityCode: '',
					name: '',
					pageNum: 1,
					pageSize: 20
				},
				bgColor: '#FFFFFF',
				showFlag: false,
				current: 0,
				urlargument: "", //存参数
				contents: [],
				tabs: [{
						label: '基本信息',
						value: 0
					},
					{
						label: '预定须知',
						value: 1
					},
					{
						label: '服务流程',
						value: 2
					}
				],
				showOptions: []
			}
		},
		async onLoad(options) {
			// 获取当前页面实例
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			// 获取页面链接携带的参数
			var urlParams = currentPage.options;
			this.urlargument = urlParams
			console.log(urlParams.id, this.urlargument.id);
			let data = {};
			let res = await this.$request(`/api/service/detail/${this.urlargument.id}`, data, 'GET');
			console.log(res);
			this.contents = res.data.data;
			console.log(this.contents, 1111)
		},
		methods: {
			goPlay(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/business/chaperonage?id='+e,
				})
			},
			goDoc() {
				uni.navigateTo({
					url: '/pages/business/chaperonage',
				})
			},
			tabsClick(e) {
				// let data = {}
				// let res = await this.$request(`/api/service/detail/${this.urlargument.id}`, data, 'GET')
				// console.log(res,123123)

				this.current = e.value;

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		/deep/.u-navbar__content.data-v-95dec1ae {
			background-color: #fff;
		}
	}

	.img1 {
		width: 92%;
		height: 135px;
		// margin-top: 10px;
		// margin-left: 15px;
		border-radius: 10px;
		margin: 10px 15px;
	}

	.u_text {
		width: 92%;
		height: 105px;
		background-color: #fff;
		padding: 6px 10px;
		box-sizing: border-box;
		// margin-top: 15px;
		// margin-left: 15px;
		margin: 10px 15px;
		border-radius: 10px;
		display: flex;

		img {
			width: 90px;
			height: 90px;
			margin-right: 15px;
			margin-left: -25px;
		}

		.ellipses-three {
			font-size: 14px;

			.u_text1 {
				font-weight: 900;
			}

			.u_text2 {
				color: #cdcdcd;
				margin: 10px 0;
			}

			.u_text3 {
				color: red;
				margin-top: 18px;
			}
		}
	}

	.bottom {
		width: 92%;
		height: 40px;
		padding-top: 10px;
		background-color: #fff;
		margin-top: 10px;
		margin-left: 15px;
		border-radius: 10px 10px 0px 0px;
	}

	.f-item {
		width: 100%;
		height: 124px;
		background-color: #fff;
		border-top: 1px solid #cdcdcd;
		border-radius: 0px 0px 10px 10px;
		font-size: 14px;
		text-align: left;
		padding-top: 15px;
		box-sizing: border-box;
		padding: 10rpx;

		.list {
			margin: 10rpx;
			text-indent: 55rpx;
		}

	}

	.bottom-box {
		position: absolute;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		// margin-top: 100px;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120rpx;

		.bottom-a {
			display: flex;
			color: #A2A2A2;
		}

		.bottom-b {
			color: red;
		}

		.bottom-c {
			background-color: blue;
			color: #fff;
			width: 105px;
			height: 30px;
			font-size: 14px;
			border-radius: 15px;
			line-height: 30px;
			text-align: center;
		}
	}
</style>